<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>数据可视化</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    #@header()
    <script>
        var navData=#(funcList);
        var userId="#(vs.code)";
        var _path="#(path)";
        var topHeight=101;
        #if(menu.link_page??)
        topHeight=61;
        #end
    </script>
    <link rel="stylesheet" href="#(path)/static/css/index.css">
    <link rel="stylesheet" href="#(path)/static/fonts/icomoon.css">
</head>

<body>
    <div class="viewport">

        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4 id="shebeizongshu" >--</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            设备总数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id = 'gaojingzongshu'>--</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            告警总数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id = 'yonghuzongshu'>--</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            用户总数
                        </span>
                    </div>
                    <div class="item">
                        <h4>0</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            异常设备
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">告警监控</a>
                    </div>
<!--                        告警信息-->
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">异常时间</span>
                            <span class="col">异常原因</span>
                            <span class="col">病患编号</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee" id= "marqueeinfo">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->

        </div>


        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    设备数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>医院病患数量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>--</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                病患量
                            </span>
                        </div>
                        <div class="item">
                            <h4>--</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                客户数
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
                        <div class="point panel">
                            <div class="inner">
                                <h3>预警分布统计</h3>
                                <div class="chart">
                                    <div class="pie"></div>
                                    <div class="data">
                                        <div class="item">
                                            <h4 id = "yujingzongshu2">--</h4>
                                            <span>
                                                <i class="icon-dot" style="color: #ed3f35"></i>
                                                预警总数
                                            </span>
                                        </div>
                                        <div class="item">
                                            <h4 id = 'numberofnewwofM'>--</h4>
                                            <span>
                                                <i class="icon-dot" style="color: #eacf19"></i>
                                                本月新增
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>病患分布</h3>
                            <div class="item">
                                <h4>39 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    内科
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    外科
                                </span>
                            </div>
                            <div class="item">
                                <h4>20 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    儿科
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    其余科室
                                </span>
                            </div>
                        </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                   <!-- <div class="all">
                        <h3>特殊关注</h3>
                        <ul>
                            <li>
                                <i class="" style="color: #d93f36;"></i>
                                张三
                            </li>
                            <li>
                                <i class="" style="color: #68d8fe;"></i>
                                李四
                            </li>
                            <li>
                                <i class="" style="color: #4c9bfd;"></i>
                                王五
                            </li>
                        </ul>
                    </div>-->
                    <div class="province">
                        <h3>特殊关注 <i class="date">// 近30分 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>张三</span>
                                    <span>25,179 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>李四</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>王五</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>赵六</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>刘七</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">
                                <!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="#(path)/static/js/jquery-1.10.2.js"></script>
<script src="#(path)/static/js/echarts-4.2.1.min.js"></script>
<script src="#(path)/static/js/index.js"></script>
<script src="#(path)/static/js/china.js"></script>
<script src="#(path)/static/js/mymap.js"></script>

<script>
    $.ajax({
        url:'#(path)/portal/business/iCustomerInfo/queryWarnInfo'
        ,type:'POST'
        ,success:function(ret){
            document.getElementById("yonghuzongshu").innerHTML = ret.numberofc;
            document.getElementById("gaojingzongshu").innerHTML = ret.numberofw;
            document.getElementById("shebeizongshu").innerHTML = ret.numberofd;
            var  warnArrayNode =  ret.warnArrayNode;
            var  countjson =  ret.countjson;
            var marqueeinfo = document.getElementById("marqueeinfo");
            for(var i = 0;i<warnArrayNode.length;i++){
                var item = warnArrayNode[i];
                var mydiv = document.createElement("div");
                mydiv.className = "row";
                var span1 = document.createElement("span")
                span1.className = "col";
                span1.innerHTML = item.warningtime
                mydiv.appendChild(span1)
                var span2 = document.createElement("span")
                span2.className = "col";
                span2.innerHTML = item.message
                mydiv.appendChild(span2)
                var span3 = document.createElement("span")
                span3.className = "col";
                span3.innerHTML = item.id
                mydiv.appendChild(span3)
                marqueeinfo.appendChild(mydiv);
            }
            document.getElementById("yujingzongshu2").innerHTML = ret.numberofw;
            document.getElementById("numberofnewwofM").innerHTML = ret.numberofnewwofM;
            showPie(ret.warnCountArrayNode)
            dingdan(countjson)

        }
    });
</script>

<script>
    //订单
    function dingdan(myData) {
        var data = myData;
        //点击事件
        $('.order').on('click', '.filter a', function () {
            //点击之后加类名
            $(this).addClass('active').siblings().removeClass('active');
            // 先获取点击a的 data-key自定义属性
            var key = $(this).attr('data-key');
            //获取自定义属性
            // data{}==>data.shuxing data['shuxing]
            key = data[key];//
            $('.order .item h4:eq(0)').text(key.orders);
            $('.order .item h4:eq(1)').text(key.amount);
        });
        //定时器
        var index = 0;
        var aclick = $('.order a');
        setInterval(function () {
            index++;
            if (index > 3) {
                index = 0;
            }
            //每san秒调用点击事件
            aclick.eq(index).click();
        }, 3000);
    }


<!--    预警分布饼图-->
    function showPie(myData) {
        var myechart = echarts.init($('.pie')[0]);
        option = {
            // 控制提示
            tooltip: {
                // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                trigger: 'item',
                // 格式化提示内容：
                // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            // 控制图表
            series: [
                {
                    // 图表名称
                    name: '名称',
                    // 图表类型
                    type: 'pie',
                    // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                    // 百分比基于  图表DOM容器的半径
                    radius: ['10%', '70%'],
                    // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                    center: ['50%', '50%'],
                    // 半径模式，另外一种是 area 面积模式
                    roseType: 'radius',
                    // 数据集 value 数据的值 name 数据的名称
                    data: myData,
                    //文字调整
                    label: {
                        fontSize: 10
                    },
                    //引导线
                    labelLine: {
                        length: 8,
                        length2: 10
                    }
                }
            ],
             color: [ '#60cda0', '#ed8884', '#ff9f7f', '#32c5e9', '#1d9dff']
        };
        myechart.setOption(option);
    };
</script>

</html>